<div class="LogView" :style="style">
    <p>
        <tooltip :delay="500" placement="top">
            <template #content>
                <div>
                    <p>收集日志等级</p>
                    <p><i>数字越小越详细，对性能影响越大。</i></p>
                </div>
            </template>
            {{$t("用户")}}
            <i-input number @on-change="logLevelChange" size="small" style="width:40px" v-model="usrLogLevel" />
            {{$t("系统")}}
            <i-input number @on-change="logLevelChange" size="small" style="width:40px" v-model="sysLogLevel" />
        </tooltip>
        {{$t("行限制")}}
        <i-input number size="small" style="width:40px" v-model="maxLogCount" />
        <tooltip :content="$t('自动滚动')" :delay="500" placement="top">
            {{$t("自动滚动")}}
            <input type="checkbox" checked @change="toggleFollowNewLog" v-bind="followNewLog" />
        </tooltip>
        <tooltip :content="$t('清除日志')" :delay="500" placement="top">
            <i-button size="small" @click="clearLog">
                <Icon type="ios-trash" />
            </i-button>
        </tooltip>
    </p>
    <p>
        {{$t("过滤")}}
        <i-input size="small" style="width:187px" v-model="filterText" />
        {{$t("排除")}}
        <i-input size="small" style="width:187px" v-model="filterExcludeText" />
    </p>
    <template v-if="isDebug">
        <Split v-model="split1" style="overflow: auto;">
            <template #left>
                <div ref="logDiv" style="overflow: auto;height:100%;">
                    <div class="logDiv" style="width:100%;font-size:12px;">
                        <p v-for="log in filteredLogList" :key="log.id" :class="'level'+log.level">
                            {{log.time}} {{log.type=='sys'?'S':'U'}}{{log.level}} {{log.stackpath}}<br />
                            {{log.msg}}
                        </p>
                    </div>
                </div>
            </template>
            <template #right>
                <div style="height:100%;width: 100%;overflow: auto;padding:3px 8px 3px 8px;">
                    <DebugView ref="debugview" :sendMessage="sendMessage" :scene="scene"
                        style="display: flex;flex-direction: column;" />
                </div>
            </template>

        </Split>
    </template>
    <template v-else>
        <div ref="logDiv" class="logDiv" style="width:100%;height:calc(100% - 50px);overflow: auto;">
            <i-table size="small" :stripe="true" :columns="logDivColumns" :data="filteredLogList"></i-table>
        </div>
    </template>
</div>